<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_10401008') }}
    </PageTitle>
    <div class="box-header flex items-center justify-between">
      <div class="my-2 flex justify-end">
        <el-button
          v-show="editFlag"
          type="success"
          style="padding: 0.5em; font-size: 14px"
          @click="save"
          >{{ $t('common.save') }}
        </el-button>
        <el-button
          v-show="editFlag"
          type="danger"
          style="padding: 0.5em; font-size: 14px"
          @click="addChart"
          >{{ $t('common.new') }}
        </el-button>
        <el-button
          v-show="editFlag"
          type="info"
          style="padding: 0.5em; font-size: 14px"
          @click="cancelEdit"
          >{{ $t('common.cancel') }}
        </el-button>
        <el-button
          v-permission="{
            permission: '10401008.MANAGE',
            condition: {}
          }"
          v-show="!editFlag"
          :type="'primary'"
          style="padding: 0.5em"
          @click="toEdit"
        >
        <svg-icon icon-class="Setting"/>
        </el-button>
      </div>
    </div>
    <hr class="mb-3" />
    <el-row :gutter="20" class="drag-container">
      <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')">
        <el-button
          type="danger"
          size="small"
          style="padding: 0.5em; font-size: 14px"
          @click="addChart"
          >{{ $t('common.new') }}
        </el-button>
      </el-empty>
      <el-col
        :lg="12"
        :md="24"
        v-for="item in chartModeList"
        :key="item.chartModeId"
        class="drag-item"
        style="position: relative"
        :data-id="item.chartModeId"
      >
        <el-card class="mb-3">
          <template #header>
            <div>
              <button
                v-if="editFlag"
                type="button"
                class="button-close"
                :distance="1"
                @click.stop="() => removeItem(item.chartModeId)"
              >
                <span>
                  <i class="el-icon-close" />
                </span>
              </button>
              <div class="flex items-center justify-between">
                <span>
                  <span>{{ item.modeName }}</span>
                </span>
              </div>
            </div></template
          >
          <chart
            v-if="item.chartType === 'bar' || item.chartType === 'line'"
            ref="chart"
            :chart-mode="item"
          />
          <pie-chart
            v-else-if="item.chartType === 'pie'"
            ref="pieChart"
            :chart-mode="item"
          />
          <data-table
            v-else-if="item.chartType === 'table'"
            ref="dataTable"
            :chart-mode="item"
          />
        </el-card>
      </el-col>
    </el-row>
    <chart-drawer v-model="drawer" @confirm="createChart" />
  </div>
</template>
<script>
import { Sortable } from '@shopify/draggable'
import ChartDrawer from './components/ChartDrawer.vue'
import { findChartMode, updateChartMode } from '@/api/chart'
import Chart from './components/Chart'
import PieChart from './components/PieChart'
import DataTable from './components/DataTable'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  components: {
    ChartDrawer,
    Chart,
    PieChart,
    DataTable,
    PageTitle
  },
  data() {
    return {
      statusList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      emptyVisible: false,
      models: [],
      drawer: false,
      objs: [],
      chartModeList: [],
      tempList: [],
      editFlag: false
    }
  },
  mounted() {
    findChartMode({ menuCode: 'device' })
      .then((res) => {
        this.chartModeList = res
        if (this.chartModeList == null || this.chartModeList.length === 0) {
          this.emptyVisible = true
        } else {
          this.emptyVisible = false
        }
      })
      .catch((err) => {
        this.$confirmError(err)
      })
  },
  methods: {
    getCurrentItems() {
      const containers = document.querySelectorAll('.drag-container')
      const itemEls = containers[0].querySelectorAll('.drag-item')
      const items = []
      itemEls.forEach((el) => {
        const i = this.chartModeList.find(
          (v) => v.chartModeId === Number(el.dataset.id)
        )
        if (i) {
          items.push(i)
        }
      })
      return items
    },
    addChart() {
      this.drawer = true
    },
    toEdit() {
      this.editFlag = true
      this.tempList = this.chartModeList.slice()
      const drags = document.querySelectorAll('.drag-container')
      this.objs = new Sortable(drags, {
        draggable: '.drag-item',
        mirror: {
          constrainDimensions: true
        },
        delay: 200
      })
    },
    cancelEdit() {
      this.editFlag = false
      this.objs.destroy()
      this.chartModeList = []
      updateChartMode(this.tempList)
        .then((res) => {})
        .catch((err) => {
          this.$confirmError(err)
        })
      this.$nextTick(() => {
        this.chartModeList = this.tempList
      })
      console.log(this.chartModeList)
      // this.tempList = this.chartModeList = this.getCurrentItems()
    },
    save() {
      this.editFlag = false
      this.tempList = this.chartModeList
      updateChartMode(this.getCurrentItems())
        .then((res) => {
          this.$message.success(this.$t('common.success'))
          findChartMode({ menuCode: 'device' })
            .then((res) => {
              this.chartModeList = res
              if (
                this.chartModeList == null ||
                this.chartModeList.length === 0
              ) {
                this.emptyVisible = true
              } else {
                this.emptyVisible = false
              }
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        })
        .catch((err) => {
          this.$confirmError(err)
        })
      this.objs.destroy()
    },
    removeItem(id) {
      this.chartModeList = this.chartModeList.filter(
        (item) => item.chartModeId !== id
      )
    },
    reset() {},
    createChart() {
      this.drawer = false
      findChartMode({ menuCode: 'device' })
        .then((res) => {
          this.chartModeList = res
          if (this.chartModeList == null || this.chartModeList.length === 0) {
            this.emptyVisible = true
          } else {
            this.emptyVisible = false
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>

<style lang='scss'>
.device-analyze {
  .el-card {
    overflow: visible;
  }

  .el-card__header {
    position: relative;
  }

  .button-close {
    top: -5px;
    right: -5px;
    z-index: 2;
  }
}
</style>

<style lang='scss' scoped>
.details {
  span {
    font-weight: 700;
  }
}

#map-buttom-panel {
  height: 99px;
  border: 1px solid #ebeef5;
}
</style>
